<section [ngClass]="['bg' + default, 'text' + defaultInv]" class="py-20">
	<div class="container px-4 mx-auto">
		<div class="max-w-2xl mx-auto mb-16 text-center">
			<span class="font-bold tracking-wider uppercase" [ngClass]="['text' + primary]">
				Pricing
			</span>
			<h2 class="text-4xl font-bold lg:text-5xl">Choose your best plan</h2>
		</div>
		<div class="flex flex-wrap items-stretch -mx-4">
			<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
				<div
					class="flex flex-grow flex-col p-6 space-y-6 rounded shadow sm:p-8"
					[ngClass]="['bg' + contrast]"
				>
					<div class="space-y-2">
						<h4 class="text-2xl font-bold">Beginner</h4>
						<span class="text-6xl font-bold">Free</span>
					</div>
					<p class="mt-3 leading-relaxed" [ngClass]="['text' + plainInv]">
						Etiam ac convallis enim, eget euismod dolor.
					</p>
					<ul class="flex-1 mb-6" [ngClass]="['text' + plainInv]">
						<li class="flex mb-2 space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								[ngClass]="['text' + primary]"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Aenean quis</span>
						</li>
						<li class="flex mb-2 space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								xmlns="http://www.w3.org/2000/svg"
								[ngClass]="['text' + primary]"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Morbi semper</span>
						</li>
						<li class="flex mb-2 space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								[ngClass]="['text' + primary]"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Tristique enim nec</span>
						</li>
					</ul>
					<button
						type="button"
						class="inline-block px-5 py-3 font-semibold tracking-wider text-center rounded"
						[ngClass]="['bg' + primary, 'text' + contrast]"
					>
						Get Started
					</button>
				</div>
			</div>
			<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
				<div
					class="flex flex-grow flex-col p-6 space-y-6 rounded shadow sm:p-8"
					[ngClass]="['bg' + primary, 'text' + contrast]"
				>
					<div class="space-y-2">
						<h4 class="text-2xl font-bold">Pro</h4>
						<span class="text-6xl font-bold">
							$24
							<span class="text-sm tracking-wide">/month</span>
						</span>
					</div>

					<p class="leading-relaxed">Morbi cursus ut sapien sit amet consectetur.</p>
					<ul class="flex-1 space-y-2">
						<li class="flex items-center space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Everything in Free</span>
						</li>
						<li class="flex items-center space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Phasellus tellus</span>
						</li>
						<li class="flex items-center space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Praesent faucibus</span>
						</li>
						<li class="flex items-center space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Aenean et lectus blandit</span>
						</li>
					</ul>
					<a
						rel="noopener noreferrer"
						href="#"
						class="inline-block w-full px-5 py-3 font-bold tracking-wider text-center rounded"
						[ngClass]="['bg' + default, 'text' + primary]"
					>
						Get Started
					</a>
				</div>
			</div>
			<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
				<div class="flex flex-grow flex-col p-6 space-y-6 rounded shadow sm:p-8" [ngClass]="['bg' + contrast]">
					<div class="space-y-2">
						<h4 class="text-2xl font-bold">Team</h4>
						<span class="text-6xl font-bold">
							$72
							<span class="text-sm tracking-wide">/month</span>
						</span>
					</div>
					<p class="leading-relaxed" [ngClass]="['text' + plainInv]">
						Phasellus ultrices bibendum nibh in vehicula.
					</p>
					<ul class="space-y-2" [ngClass]="['text' + plainInv]">
						<li class="flex items-start space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								[ngClass]="['text' + primary]"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Everything in Pro</span>
						</li>
						<li class="flex items-start space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								xmlns="http://www.w3.org/2000/svg"
								[ngClass]="['text' + primary]"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Fusce sem ligula</span>
						</li>
						<li class="flex items-start space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								[ngClass]="['text' + primary]"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Curabitur dictum</span>
						</li>
						<li class="flex items-start space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								[ngClass]="['text' + primary]"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Duis odio eros</span>
						</li>
						<li class="flex items-start space-x-2">
							<svg
								class="flex-shrink-0 w-6 h-6"
								[ngClass]="['text' + primary]"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
									clip-rule="evenodd"
								></path>
							</svg>
							<span>Vivamus ut lectus ex</span>
						</li>
					</ul>
					<a
						class="inline-block w-full px-5 py-3 font-semibold tracking-wider text-center rounded"
						[ngClass]="['bg' + primary, 'text' + contrast]"
						rel="noopener noreferrer"
						href="#"
					>
						Get Started
					</a>
				</div>
			</div>
		</div>
	</div>
</section>
